<template>
  <div class="page page-full page-healthy-list  has-headbar">
    <van-nav-bar
      fixed
      :z-index="100"
      left-text="体质监测"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight">
        <div class="right-icon icon-location" slot="right"></div>
    </van-nav-bar>
    <search class="search-section" placeholder="请输入名称" v-model="searchValue" @search="onSearch" />
    <div class="list">
      <van-pull-refresh class="pullrefresh-box" v-model="refreshLoading" @refresh="onRefresh">
        <van-list
          v-model="moreLoading"
          :finished="moreFinished"
          @load="onLoad">
          <template v-for="point in list">
            <list-item class="point-item" :key="point.id" :point="point"></list-item>
          </template>
          <!-- <empty-data v-if="!list.length"></empty-data> -->
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { Tab, Tabs } from 'vant'
import { API_PHYSICAL_LIST } from '@/service/physical'
import ListItem from './components/ListItem'
import Search from '@/components/Search'
export default {
  name: 'fit-list',
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    ListItem,
    Search
  },
  data () {
    return {
      searchValue: '',
      pageSize: 6,
      pageNumber: 0,
      refreshLoading: false,
      moreLoading: false,
      moreFinished: false,
      list: []
    }
  },
  computed: {
    ...mapState({
      lng: state => state.user.lng,
      lat: state => state.user.lat
    })
  },
  methods: {
    requestData (callback) {
      let reqData = {
        lon: this.lng,
        lat: this.lat,
        name: this.searchValue,
        pageNumber: this.pageNumber + 1,
        pageSize: this.pageSize
      }
      return API_PHYSICAL_LIST(reqData).then(resData => {
        let { list, total } = resData
        if (list <= 0) {
          this.moreFinished = true
        } else {
          this.pageNumber = this.pageNumber + 1
          callback && callback(resData)
          if (total === this.list.length) {
            this.moreFinished = true
          }
        }
      }).catch(() => {
        this.moreFinished = true
      })
    },
    onLoad () {
      this.requestData(resData => {
        let list = resData.list
        this.list = [...this.list, ...list]
      }).finally(() => {
        this.moreLoading = false
      })
    },
    onRefresh () {
      this.pageNumber = 0
      this.refreshLoading = true
      this.requestData((resData) => {
        this.list = resData.list
      }).finally(() => {
        this.refreshLoading = false
      })
    },
    onSearch () {
      this.pageNumber = 0
      this.list = []
      this.requestData(resData => {
        this.list = resData.list
      })
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    onClickRight () {
      this.$router.push({ name: 'healthy-map' })
    }
  }
}
</script>

<style lang="less">
.page-healthy-list{
  display: flex;
  flex-direction: column;
  .right-icon{
    display: inline-block;
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    vertical-align: middle;
    background-position: center center;
  }
  .icon-location{
    background-image: url("../../assets/images/icon_location.png");
    background-size: 40/2px 48/2px;
  }
  .point-item{
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .search-section{
    margin-top: 15px;
    margin-bottom: 10px;
  }
  .list{
    overflow: hidden;
    flex: 1;
  }
  .van-pull-refresh__track {
    min-height: 100%;
  }
  .van-list{
    overflow: hidden;
  }
}
</style>
